<template>
  <!-- keep-alive:作用：组件缓存(该组件不会被销毁)
    用法：
     <keep-alive>
        组件
     </keep-alive>
     被缓存组件多了二个生命周期
      activated:显示时（激活时）
      deactivated:隐藏时
      较多的是用于路由的缓存   <keep-alive><router-view /> <keep-alive>   -->
  <div class="article">
    <van-nav-bar
      title="文章详情"
      left-arrow
      fixed
      placeholder
      @click-left="$router.go(-1)"
    ></van-nav-bar>

    <div class="content">
      <h3 class="title">{{ info.title }}</h3>
      <div class="info">
        <img class="avatar" :src="info.aut_photo" alt="" />
        <div class="name">
          <div class="username">{{ info.aut_name }}</div>
          <div class="time">{{ info.pubdate | formatDate }}</div>
        </div>
        <van-button type="info" round size="small">+ 关注</van-button>
      </div>
      <div v-html="info.content" class="main"></div>
      <van-divider>end</van-divider>
      <div class="btn">
        <van-button round plain type="primary" icon="good-job-o"
          >点赞</van-button
        >
        <van-button
          style="margin-left:15px;"
          round
          plain
          type="danger"
          icon="delete-o"
          >不喜欢</van-button
        >
      </div>
    </div>
    <Comment></Comment>
  </div>
</template>
<script>
import { articles } from '@/api/article'
import Comment from './components/comment'
export default {
  components: {
    Comment
  },
  data () {
    return {
      id: this.$route.params.id,
      info: ''
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await articles(this.id)
      this.info = res.data.data
      console.log('文章详情', res)
    }
  }
}
</script>
<style lang="less" scoped>
// scoped:只管当前组件和子组件最外层，富文本（带标签的字符串）也管不到
.content {
  width: 100vw;
  box-sizing: border-box;
  padding: 20px 20px 60px 20px;
  .title {
    font-size: 30px;
  }
  .info {
    display: flex;
    align-items: center;
    padding: 15px 0;
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 20px;
    }
    .name {
      flex: 1;
    }
  }
}

::v-deep pre {
  // 用于换行处理
  word-break: break-all;
  line-break: anywhere;
  background-color: #000;
  color: #fff;
  width: 100%;
  display: inline-block;
  overflow-x: auto;
}
.main {
  width: 100%;
  height: auto;
  overflow: hidden;
  // padding-bottom: 60px;
}

.btn {
  text-align: center;
}
</style>
